<template>
  <scroll-view class="viewport" scroll-y @scrolltolower="onScrolltolower">
    <!-- 订单状态 -->
    <view class="overview">
      <view class="status icon-checked">支付成功</view>
      <view class="buttons">
        <navigator hover-class="none" class="button navigator" url="/pages/index/index" open-type="switchTab">返回首页</navigator>
        <navigator hover-class="none" class="button navigator" :url="`/orderPages/orderDetail/orderDetail?orderId=${props.orderId}`" open-type="redirect">查看订单</navigator>
      </view>
    </view>

    <!-- 猜你喜欢 -->
    <XtxGuess ref="GuessRef" />
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from "vue";

//获取页面参数
const props = defineProps<{
  orderId:string
}>()

//猜你喜欢组件实例
const GuessRef = ref();

//滚动条触底事件
const onScrolltolower = () => {
    //加载更多猜你喜欢数据
    GuessRef.value.getGuessLikeList();
}
</script>

<style lang="scss">
 page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.viewport {
  background-color: #f7f7f8;
}

.overview {
  line-height: 1;
  padding: 50rpx 0;
  color: #fff;
  background-color: #27ba9b;

  .status {
    font-size: 36rpx;
    font-weight: 500;
    text-align: center;
  }

  .status::before {
    display: block;
    font-size: 110rpx;
    margin-bottom: 20rpx;
  }

  .buttons {
    height: 60rpx;
    line-height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;
  }

  .button {
    text-align: center;
    margin: 0 10rpx;
    font-size: 28rpx;
    color: #fff;

    &:first-child {
      width: 200rpx;
      border-radius: 64rpx;
      border: 1rpx solid #fff;
    }
  }
}   
</style>